<template>
    <div class="admin-sider-menu"  >
        <div class="admin-sider-item-header">
            <div class="title-box" @click="handleItem" :style="titleStyle" >
                <div class="icon"  v-if="item.icon"><bi-icon :data="item.icon" ></bi-icon></div>
                <div class="title" >{{item.title}}</div>
            </div>
            <div class="ctrl"  >
                <div class="ctrl-btn" v-if="hasChildren">
                    <bi-icon :data="isFold?'fa-chevron-up':'fa-chevron-down'" @click="handleFold"></bi-icon>
                </div>
            </div>
           
        </div>
        <div class="admin-sider-item-children" v-if="hasChildren && isFold">
            <sider-menu  v-for="item in item.children" :item="item" :key="item.id" :level="level+1"></sider-menu>
        </div>
    </div>
</template>

<script>
export default{
    name:'sider-menu',
    data(){


        
        let  simpleHash = (inputString) => {
            let hash = 0;
            for (let i = 0; i < inputString.length; i++) {
                const charCode = inputString.charCodeAt(i);
                hash = ((hash << 5) - hash) + charCode; 
                hash &= hash; 
            }
            return hash;
        
        
        }

        let hasChildren = false;
        let isFold = false;
        let id = 'admin-sider-menu-' + simpleHash(JSON.stringify(this.item));
        if(this.item.children && this.item.children.length > 0){
            hasChildren = true;
            isFold = this.$user.getLocalStorage(id)??false;
        }

        return {
            id,
            hasChildren,
            isFold
        }
    },
    methods:{
        handleItem(){
            if (this.item.url){
                location.href = this.item.url;
            }

            if (this.item.children && this.item.children.length > 0){
                this.isFold =!this.isFold;
            }
        },
        handleFold(){
            this.isFold =!this.isFold;
            
        }
    },
    watch:{
        isFold(val){
            this.$user.setLocalStorage(this.id,val);
        }
    },
    computed:{
        titleStyle(){
            let style = {};
            if (this.level>=1){
               style.paddingLeft = (30+(this.level-1)*30)+'px';
            }
            return style;
        }
    },
    props:{
        item:{
            type:Object,
        },
        level:{
            type:Number,
            default:0
        }
    }
}
</script>

<style>
.admin-sider-menu{
    position: relative;
}
.admin-sider-menu .admin-sider-item-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.admin-sider-menu .admin-sider-item-header .title-box{
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
}

.admin-sider-menu .admin-sider-item-header:hover{
     background-color: rgba(0, 0, 0, 0.2);
}

.admin-sider-menu .admin-sider-item-header .title-box .title{
    font-size: 14px;
    font-weight: 600;
}

.admin-sider-menu .admin-sider-item-header .title-box .icon{
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-right: 5px;
}
.admin-sider-menu .admin-sider-item-header .ctrl{
    font-size: 12px;
    display: flex;
    align-items: center;
 }


.admin-sider-menu .admin-sider-item-header .ctrl .ctrl-btn{
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--bs-dark-bg-subtle);
    opacity: 0.5;
    transition: all.2s ease-in-out;
}

.admin-sider-menu .admin-sider-item-header .ctrl .ctrl-btn:hover{
    opacity: 1;
}
</style>